<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线用户</title>

    <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../../lib/element-ui/element-ui-2.8.2.css">
    <link rel="stylesheet" href="../../lib/iconPicker/fontawesome-iconpicker.min.css">
</head>
<body>
<div id="app">

    <el-table :data="userList">

        <el-table-column prop="userId" label="id" align="center">

        </el-table-column>
        <el-table-column prop="username" label="姓名" align="center">

        </el-table-column>

        <el-table-column width="200px" prop="host" label="ip地址" align="center">

        </el-table-column>

        <el-table-column width="200px" prop="startTimestamp" label="创建时间" align="center">

        </el-table-column>

        <el-table-column width="200px" prop="lastAccessTime" label="最后访问时间" align="center">

        </el-table-column>

        <el-table-column width="200px" label="登录环境"  align="center">

            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">

                    <p>
                        <el-tag>
                            <i class="fa fa-calendar"></i>
                            <span>浏览器</span>
                        </el-tag>
                        {{ scope.row.userAgent }}
                    </p>


                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium" type="info">详情</el-tag>
                    </div>
                </el-popover>
            </template>

        </el-table-column>


        <el-table-column prop="status" label="状态" align="center">

        </el-table-column>

        <el-table-column label="操作" align="center">

            <el-button
                    type="danger"
                    slot-scope="scope"
                    round
                    @click="kickOut(scope.row)">踢出
            </el-button>

        </el-table-column>

    </el-table>


</div>

</body>
</html>

<script src="../../lib/jQuery-3.31/jquery-3.3.1.js"></script>
<script src="../../lib/vue/vue.js"></script>
<script src="../../lib/element-ui/elementUI-2.8.2.js"></script>
<script src="../../lib/vue/axios-0.18.js"></script>

<script>


    let app = new Vue({

        el: '#app',
        data: {

            userList: []

        },

        methods: {

            kickOut: function (row) {


                if (row.userId === sessionStorage.getItem("currentUserId")){

                    app.$message.error("不能将自己踢出");
                    return;

                }

                $.ajax({
                    url: '/system/kickOut',
                    type: 'get',
                    data: {'id': row.id},
                    success: (result)=> {
                        if (result.success===true){

                            getUserOnline();
                            app.$notify.success({
                                title: '成功',
                                message: result.msg
                            })

                        } else {
                            app.$notify.error({
                                title: '错误',
                                message: result.msg
                            })
                        }
                    }


                })

            }

        },


        created: getUserOnline()

    })

    /**
     * 格式化时间 yyyy-MM-dd hh:mm:ss
     * @param dateTime
     * @returns {string}
     */
    function formateDate(dateTime) {

        let date = new Date(dateTime);
        let year = date.getFullYear();
        let mon = date.getMonth() + 1;
        let day = date.getDate();
        let hour = date.getHours();
        let min = date.getMinutes();
        let second = date.getSeconds();

        return year + '-' + mon + '-' + day + ' ' + hour + ':' + min + ':' + second;

    }

    function getUserOnline() {


        $.ajax({

            url: '/system/getuseronline',
            type: 'get',
            success: function (result) {

                if (result.success === true) {
                    app.userList=[];
                    // app.userList = result.data;
                    for (item of result.data) {
                        item.lastAccessTime = formateDate(item.lastAccessTime);
                        item.startTimestamp = formateDate(item.startTimestamp);
                        app.userList.push(item)
                    }
                } else {

                    app.$notify.error({
                        title: '错误',
                        message: result.msg
                    })
                }
            }

        })

    }

</script>
